<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>图文详情</title>
    <link rel="stylesheet" href="../css/api.css">
    <link rel="stylesheet" href="../css/main.css">
    <link rel="stylesheet" href="../css/vant.css">
    <link rel="stylesheet" href="../css/swiper.min.css">
    <link rel="stylesheet" href="../css/circle.css">
    
    <style>
        header .flex-x-sb{
            justify-content: flex-start;
        }
        .whiteArea{
            height: 30px;
        }
    </style>
</head>

<body>
    <div class="app circle-detail-app" v-cloak style="position: relative;">
        <div class="circle-detail-introduce">
            <header>
                <div class="flex-x-sb" style="position: relative;">
                    <div class="title-user">
                        <img class="title-user-img" :src="!!detailData.headImg ? detailData.headImg : 'https://cdn.tiexiemall.com/static/user/default.png'" alt="" >
                        <span class="title-user-nickname">{{ detailData.nickName }}</span>
                        <span v-if="detailData.attentionFlag != -1" class="title-tag" :class="[detailData.attentionFlag ? '' : 'blue-title-tag']">{{detailData.attentionFlag ? '已关注' : '关注'}}</span>
                    </div>
                </div>
            </header>
            <!-- 轮播 -->
            <div class="circle-swiper">
                <div class="swiper-container">
                    <div class="swiper-wrapper" >
                        <template v-for="(banner,index) in detailData.medias">
                            <div class="swiper-slide" :key="index" @click="toPreview(banner.imagePath)">
                                <img :src="banner.imagePath"  >
                            </div>
                        </template>
                    </div>
                    <div class="swiper-pagination" id="pagination"></div>
                </div>
                <van-image-preview v-model="preview" :images="imageUrls" :start-position="startPosition">
                </van-image-preview>  
            </div>
            <!-- 介绍 -->
            <div class="circle-content">
                <div class="circle-detail-title">{{detailData.title}} </div>
                <div class="circle-detail-content">{{detailData.content}}</div>
                <div class="circle-detail-other">
                    <span>{{detailData.nickName}}</span>
                    <span>{{detailData.hitNumber}}人看过</span>
                </div>
            </div>
            <!-- 评论 -->
            <div class="circle-comment-box">
                <div class="circle-comment-head">{{detailData.commentNumber}}条评论</div>
                <div class="circle-comment-list">
                    <div class="circle-comment-list-item" v-for="(item, index) in commentLists" :key="'comment' + index">
                        <img class="circle-comment-item-avator" :src="!!item.headImg ? item.headImg : 'https://cdn.tiexiemall.com/static/user/default.png'" alt="avator">
                        <div class="circle-comment-item-box">
                            <div class="circle-comment-item-main">
                                <div class="circle-comment-list-content">
                                    <div class="circle-comment-item-title">{{ item.nickName }}</div>
                                    <div class="circle-comment-item-content">{{ item.content }}
                                        <span class="circle-comment-item-time">{{ item.publishTime }}</span>
                                    </div>
                                </div>
                                <div class="circle-comment-thumpup">
                                    <img class="circle-comment-thumpup-img" :src="item.thumbsFlg ? thumpupActiveIcon : thumpupIcon " alt="thumpup">
                                    <p class="circle-comment-thumpup-num">{{ item.thumbsNum }}</p>
                                </div>
                            </div>
                            <div class="circle-comment-item-replay" v-if="item.childTopicComments && item.childTopicComments.length > 0">
                                <template v-for="(subItem, subIndex) in item.childTopicComments" >
                                    <div class="circle-comment-list-item" v-if="subIndex === 0 || item.showMore" :key="'replay' + subIndex">
                                        <img class="circle-comment-item-avator" :src="subItem.headImg" alt="avator">
                                        <div class="circle-comment-list-content" >
                                            <div class="circle-comment-item-title">{{ subItem.nickName }}</div>
                                            <div class="circle-comment-item-content">
                                                <span v-if="subItem.toNickName">回复 
                                                    <span class="circle-comment-replay-username">{{subItem.toNickName}}</span> 
                                                </span>
                                                {{ subItem.content }}
                                                <span class="circle-comment-item-time">{{ subItem.publishTime }}</span>
                                            </div>
                                        </div>
                                        <div class="circle-comment-thumpup">
                                            <img class="circle-comment-thumpup-img" :src="subItem.thumbsFlg ? thumpupActiveIcon : thumpupIcon " alt="thumpup">
                                            <p class="circle-comment-thumpup-num">{{ subItem.thumbsNum }}</p>
                                        </div>
                                    </div>
                                </template>
                                <div v-if="!item.showMore && item.childTopicComments.length > 1" class="circle-comment-list-replay-morebtn" @click="showMoreComment(item, index)">展开{{item.childTopicComments.length - 1}}条回复</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="circle-comment-list-nomore">- 没有更多了 -</div>
            </div>
            <div class="share-qrcode">
                <div class="qrcode-icon">
                    <img src="https://www.tiexiemall.com/resource/img/mini.jpg" alt="">
                </div>
                <div class="share-link">铁蟹网</div>
            </div>
        </div>

    </div>
    <script src="../script/flexible.js"></script>
    <script src="../script/vue.min.js"></script>
    <script src="../script/iconfont.js"></script>
    <script src="../script/vant.min.js"></script>
    <script src="../script/swiper.min.js"></script>
    <script src="../script/common.js"></script>
    <script>
        vm = new Vue({
                el: '.app',
                data(){
                    return {
                        preview: false,
                        startPosition: 0,
                        imageUrls: ['../image/default/thumpup_icon.png', '../image/default/thumpup_selected_icon.png'],
                        thumpupIcon: '../image/default/thumpup_icon.png', // 未点赞状态
                        thumpupActiveIcon: '../image/default/thumpup_selected_icon.png', // 点赞状态
                        detailData: {
                            attentionFlag: 0, // 关注状态 -1: 本人 0: 未关注 1: 关注
                            auditStatus: 0, // 审核状态 0: 待审核 1: 通过 2: 驳回
                            channelId: 0, // 频道ID
                            commentNumber: 0, // 评论数量
                            content: '', // 动态内容
                            forwardNumber: 0, // 转发数量
                            headImg: '', // 发布用户头像
                            hitNumber: 10, // 单击数量
                            likeFlag: false, // 是否点赞
                            likeNumber: 0, // 点赞数量
                            location: '', // 定位经纬度 格式: lon, lat
                            medias: [{
                                imagePath:'../image/default/thumpup_icon.png'
                            },{
                                imagePath:'../image/default/thumpup_selected_icon.png'
                            }],
                            nickName: '', // 发布用户昵称
                            publishTime: '', // 发布时间
                            sort: 0, // 排序
                            title: '', // 发布标题
                            topicId: 0, 
                            type: 0, // 类型 0: 图文 1: 视频
                            userId: 0 // 用户id
                        },
                        commentLists: [
                            {
                                childTopicComments: [ // 回复人
                                ],
                                content: '', // 评论内容
                                headImg: '', // 评论用户头像
                                nickName: '', // 评论用户昵称
                                publishTime: '', // 评论时间
                                thumbsFlg: false, // 当前登录人是否点赞
                                thumbsNum: 0, // 评论点赞总数
                                toNickName: '', // 被评论人用户昵称
                                toUserId: 0, // 被评论人ID
                                topicCommonId: 0, // 动态评论id
                                type: 0, // 评论类型
                                userId: 0 // 评论用户id
                            }
                        ],
                    }
                },
                mounted() {
                    // this.initDetail();
                    this.initSwiper()
                },
                methods: {
                    // 数据初始化
                    initDetail(vm) {
                        var vm = vm || this;
                        fnGet(interfaces.CONTENT_MODULE.CIRCLE.GET_NEWDETAIL + "/" + vm.topicId, {}, false,
                            function (ret, err) {
                                if (ret && ret.code === RESPONSE_OK) {
                                    vm.detailData = ret.data.topic
                                    vm.commentLists = ret.data.topicComments
                                    vm.$nextTick(() => {
                                        vm.initSwiper()
                                    })
                                } else {
                                    toastBottom(ret ? ret.msg : '');
                                }
                            }
                        );
                    },

                    // 初始化轮播
                    initSwiper(){
                        new Swiper(".swiper-container", {
                            initialSlide: 0,
                            slidesPerView: "auto",
                            centeredSlides: !0,
                            watchSlidesProgress: !0,
                            pagination: ".swiper-pagination"
                        });
                    },

                    // 图片预览
                    toPreview(imgUrl) {
                        this.preview = true;
                        const index = this.imageUrls.findIndex(t => {
                            return t === imgUrl;
                        });
                        this.startPosition = index >= 0 ? index : 0;
                    },

                    // 展开更多回复评论
                    showMoreComment(item, index){
                        this.$set(this.commentLists[index], 'showMore', true )
                    },
                    
                }

            })
    </script>
</body>
</html>
